{% comment %} {% if shop.customer_accounts_enabled %}
<div class="bg-gray-100">
  <div class="container py-6 py-md-7">
    <div class="account-card px-3 py-4 p-md-6 bg-white mx-auto rounded-1">
      {% render 'account-login' %}
    </div>
  </div>
</div>
{% else %}
  {% render 'main-404' %}
{% endif %}
<script src="{{ 'customers-v2-login.min.js' | asset_url }}" defer="defer"></script> {% endcomment %}

<section id="recover" class="recover-account">
  <div class="container pt-7 h-8">
    <div class="customer login">
      <h2 class="text-center mb-0 h4">{{ 'customer.recover_password.title' | t }}</h1>
      <div>
        <p class="text-center mt-1 gray-600 small mb-0">{{ 'customer.recover_password.subtext' | t }}</p>
        <div class="row justify-content-center">
          <div class="mw-text-3">
            {% form 'recover_customer_password', class: 'as-validate-form', novalidate: 'novalidate', autocomplete: "off" %}
            {% assign recover_success = form.posted_successfully? %}
            {%- if form.errors -%}
            <div class="as-email-errors-wrap">
              <div class="mt-4 d-flex align-items-center">
                <div class="me-2 text-danger">
                  {% render 'icon-alert-circle' %}
                </div>
                <div class="text-danger fs-footnote">{{ 'customer.reset_password.recover_errors' | t }}</div>
              </div>
            </div>
            {%- endif -%}
              <div class="form-pristine mt-4">
                <input type="email" name="email" data-pristine-required-message="{{ 'general.subscribe.email_error_message' | t }}" data-pristine-email-message="{{ 'general.subscribe.email_error_message' | t }}" placeholder="{{ 'customer.recover_password.email' | t }}" class="input-pristine form-control" required
                {% if form.errors %}
                aria-invalid="true"
                aria-describedby="RecoverEmail-email-error"
                autofocus
                {% endif %}>
              </div>
              <div class="mt-4">
                <button class="btn btn-primary w-100 btn-mw" type="submit">{{ 'customer.recover_password.submit' | t }}</button>
              </div>
              <div class="text-center mt-4 fs-footnote">
                {{ 'customer.recover_password.back_to_login_html' | t }}
              </div>
            {% endform %}
          </div>
        </div>
      </div>
    </div>
    </div>
</section>
<section id="login" class="user-login">
  <div class="container pt-7 h-8">
    {%- if recover_success == true -%}
      <div class="customer login">
        <h2 class="text-center mb-0 h4">{{ 'customer.recover_password.title' | t }}</h1>
        <div class="mw-text-3 mx-auto">
          <p class="text-center mt-1 gray-600 small mb-0">{{ 'customer.recover_password.success' | t }}</p>
          <div class="mt-4">
            <a class="btn btn-primary w-100 btn-mw" href="">{{ 'customer.recover_password.back_to_login' | t }}</a>
          </div>
        </div>
      </div>
    {%- else -%}
    <div class="customer login">
      <h1 class="text-center mb-0 h4">{{ 'customer.login_page.title' | t }}</h1>
      <div>
        <div class="row justify-content-center">
          <div class="mw-text-3">
            {% form 'customer_login', class: 'as-validate-form', novalidate: 'novalidate', autocomplete: "off" %}
              {%- if form.errors -%}
              <div class="as-email-errors-wrap">
              {%- for field in form.errors -%}
              <div class="mt-4 d-flex align-items-center">
                <div class="me-2 text-danger">
                  {% render 'icon-alert-circle' %}
                </div>
                {%- if field == 'form' -%}
                <div class="text-danger fs-footnote ">
                  {{ 'customer.login_page.login_errors' | t }}
                </div>
                {%- else -%}
                <div class="text-danger fs-footnote ">
                  {{ form.errors.translated_fields[field] | capitalize }}
                  {{ form.errors.messages[field] }}
                </div>
                {%- endif -%}
              </div>
              {%- endfor -%}
              </div>
              {%- endif -%}
              <div class="form-pristine mt-4">
                <input type="email" name="customer[email]" data-pristine-required-message="{{ 'general.subscribe.email_error_message' | t }}" data-pristine-email-message="{{ 'general.subscribe.email_error_message' | t }}" placeholder="{{ 'customer.login_page.email' | t }}" class="input-pristine form-control" required
                {% if form.errors contains 'form' %}
                  aria-invalid="true"
                {% endif %}>
              </div>
              <div class="mt-3">
                <div class="align-items-center as-pwd-wrap d-flex form-pristine position-relative flex-column">
                  <input type="password" name="customer[password]" data-pristine-pattern= "/^[^\s]{8,}$/" data-pristine-pattern-message="{{ 'customer.customer.password_pattern_error_message' | t }}" data-pristine-required-message="{{ 'customer.customer.password_error_message' | t }}"   placeholder="{{ 'customer.login_page.password' | t }}" class="as-pwd-input input-pristine form-control pe-6" required
                  {% if form.errors contains 'form' %}
                  aria-invalid="true"
                  {% endif %}>
                  <div class="as-visible-control visible-control content-invisible" required>
                    <div class="icon-eye-off cursor-pointer">
                      {% render 'icon-eye-off' %}
                    </div>
                    <div class="icon-eye cursor-pointer">
                      {% render 'icon-eye' %}
                    </div>
                  </div>
                </div>
                <div class="fs-footnote mb-0 mt-3 gray-600">{{ 'customer.login_page.privacy_policy_html' | t }}</div>
              </div>
              <div class="mt-4">
                <button class="btn btn-primary w-100 btn-mw" type="submit">{{ 'customer.login_page.submit' | t }}</button>
              </div>
              <div class="text-center mt-2 fs-footnote gray-600">
                {{ 'customer.login_page.forgot_password_html' | t }}
              </div>
              <div class="text-center mt-4 fs-footnote gray-600">
                {{ 'customer.login_page.create_account_html' | t }}
              </div>
            {% endform %}
          </div>
        </div>
      </div>
    </div>
    {%- endif -%}
  </div>
</section>